<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fnGetSystemUser">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="fnOpenSystemUser">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--系统用户列表-->
		<el-table :data="systemUsers" border v-loading="systemUsersLoading" class="system-user-list">
			<el-table-column type="index" label="#" width="60">
			</el-table-column>
			<el-table-column prop="EmpID" label="工号">
			</el-table-column>
			<el-table-column prop="EmpName" label="姓名">
			</el-table-column>
			<el-table-column prop="Createdby" label="创建者">
			</el-table-column>
			<el-table-column prop="CreatedTime" label="创建时间">
			</el-table-column>
			<el-table-column label="操作" width="65">
				<template scope="scope">
				    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
				      	<el-button type="danger" size="mini" icon="custom-delete"  @click="fnDelete(scope.row.EmpID)"></el-button>
				    </el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="total, prev, pager, next" @current-change="fnPaginationChange" :page-size="size" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
				<el-form-item label="部门">
					<el-select v-model="addForm.dept" placeholder="请选择" @change="fnChangeDept">
						<el-option v-for="item in depts" :key="item.ORGANIZATION_ID" :label="item.ORGANIZATION_NAME" :value="item.ORGANIZATION_ID"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="人员">
					<el-select v-model="addForm.account" placeholder="请选择">
						<el-option v-for="item in staffs" :key="item.USER_ACCOUNT" :label="item.USER_NAME" :value="item.USER_ACCOUNT">
							<span style="float: left">{{ item.USER_NAME }}</span>
							<span style="float: right; color: #8492a6; font-size: 13px">{{ item.USER_ACCOUNT }}</span>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="fnAddSystemUser">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
    import Svc from '../../service/index.js'
	export default {
		data() {
			return {
				filters : {
					name : ''
				},
				systemUsersLoading : false,
				systemUsers : [],
				total: 0,
				skip: 0,
				size: 10,
				//新增内容
				addForm : {
					dept : '',
					account : ''
				},
				addFormVisible : false,
				//新增验证
				addFormRules : {
    	        	Desc: [
		            	{ required: true, message: '请输入假日名城', trigger: 'blur' }
		          	]
		      	},
		      	depts : [], //所有部门
				staffs : [] //当前部门下的员工
			}
		},
		methods: {
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
		    //分页
			fnPaginationChange : function(val) {
				this.skip = val-1;
				this.fnGetSystemUser();
			},
		    //获取所有系统用户
		    fnGetSystemUser(){
		    	var that = this
				that.systemUsersLoading = true
				//skip代表数据下标，从0开始
				var params = {
					Skip: that.skip*that.size,
					Size: that.size,
					Name: that.filters.name
				};
				
	            Svc.fnPostData('/api/account/sysuser/fetch',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.systemUsers = res.body.Data.List
	            		that.total = res.body.Data.Total
	            		that.systemUsersLoading = false
	            	} else {
	            		that.openMessage("系统用户获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //获取所有部门信息
		    fnGetDepts(){
		    	var that = this
	            Svc.fnGetData('/api/account/alldepts',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.depts = res.body.Data
	            	} else {
	            		that.openMessage("部门信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //选择部门
		    fnChangeDept(val){
		    	var that = this
		    	that.fnGetStaffs()
		    },
		    //获取当前部门的员工
		    fnGetStaffs(){
		    	var that = this
	            Svc.fnGetData('/api/account/deptuser/'+that.addForm.dept,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.staffs = res.body.Data
	            	} else {
	            		that.openMessage("当前部门的员工信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //打开新增页面
		    fnOpenSystemUser(){
		    	var that = this
		    	that.addFormVisible = true
		    },
	      	//新增系统用户
	      	fnAddSystemUser(){
	      		var that = this
		    	var params = {
		    		EmpID : that.addForm.account,
					EmpName : ''
		    	}
		    	//获取系统用户姓名
		    	for (var i=0;i<that.staffs.length;i++) {
		    		var item = that.staffs[i]
		    		if (item.USER_ACCOUNT == that.addForm.account) {
		    			params.EmpName = item.USER_NAME
		    			break
		    		}
		    	}
		    	
	            Svc.fnPostData('/api/account/sysuser/save',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.addFormVisible = false
	            		that.fnGetSystemUser()
	            	} else {
	            		that.openMessage("新增系统用户失败！" + res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //删除
		    fnDelete(id){
		    	var that = this
		    	that.$confirm('您确认删除该系统用户吗？', '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/account/sysuser/remove',{EmpID:id},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage("删除操作成功！",'success')
		            		that.fnGetSystemUser()
		            	} else {
		            		that.openMessage("删除操作失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				})
		    }
		},
		mounted() {
			//获取所有系统用户
		    this.fnGetSystemUser()
		    //获取所有部门信息
	    	this.fnGetDepts()
		}
	}

</script>

<style scoped>
	.system-user-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
</style>